<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<link rel="stylesheet" href="css/bootstrap.min.css">
		<script src="js/jquery-3.0.0.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<title>啧啧啧啧啧</title>
	</head>
	<body>
		<div style="background: url(imgs/men.jpg);height:100%;width:100%;repeat;margin-left: auto;margin-right: auto;" align="center">
			<div>
				<button id="anonBtn" type="button" class="btn btn-info" data-toggle="tooltip" data-placement="bottom" title="如果选择匿名登录，每次将会随机得到一个 昵称，或者头像">匿名浏览</button>
			</div>
			<hr />
			<div>
				<button id="loginBtn" type="button" class="btn btn-info" data-toggle="tooltip" data-placement="bottom" title="通过用户名和密码登录">账号登录</button>
			</div>
		</div>
		<!-- 模态框（Modal） -->
		<div class="modal fade" id="loginModal" tabindex="-1" role="dialog"  aria-labelledby="myModalLabel" aria-hidden="true">
   			<div class="modal-dialog">
      			<div class="modal-content">
         			<div class="modal-header">
            			<button type="button" class="close" data-dismiss="modal" aria-hidden="true"> &times;</button>
            			<h4 class="modal-title" id="myModalLabel">
              				<span style="margin-left: auto;margin-right: auto;"> 登录</span>
           				</h4>
         			</div>
        			<div class="modal-body">
           				账号: <input id="username" type="text" value=""/>
     					密码：  <input id="password" type="text" value=""/>
         			</div>
         			<div class="modal-footer" style="align-content: center;">
         				<button type="button" class="btn btn-success" data-dismiss="modal">注册</button>
            			<button type="button" class="btn btn-default" data-dismiss="modal">返回</button>
            			<button id="lg" type="button" class="btn btn-primary">登录</button>
         			</div>
      			</div><!-- /.modal-content -->
			</div><!-- /.modal -->
		</div>
		<script>
		$(function(){
			var User = {};
			
			$("#loginBtn").click(function(){
				$("#loginModal").modal('show')
			});	
			
			$("#lg").click(function(){
				User.password = $("#password").val();
				User.name = $("#username").val();
				$.ajax({
					type:"post",
					url:"login/user-login",
					dataType: "json",
					data: JSON.stringify(User),
					success: function(obj){
					console.log('******obj*******');
						console.log(obj);
						if(obj.userRole=='p'){
							window.location.href="page/card.jsp"; 
						}
					}
				});
			});	
		});
		</script>
	</body>
</html>
